<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>库存调拨</span>
      </div>
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="单据编号">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="调出仓库">
            <el-select placeholder="请选择">
              <el-option label="主仓库" value="main"></el-option>
              <el-option label="分仓库A" value="branchA"></el-option>
              <el-option label="分仓库B" value="branchB"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="调入仓库">
            <el-select placeholder="请选择">
              <el-option label="主仓库" value="main"></el-option>
              <el-option label="分仓库A" value="branchA"></el-option>
              <el-option label="分仓库B" value="branchB"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button type="success" icon="el-icon-plus">新增</el-button>
          </el-form-item>
        </el-form>
        
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="billNo" label="单据编号" width="150"></el-table-column>
          <el-table-column prop="billDate" label="单据日期" width="120"></el-table-column>
          <el-table-column prop="outWarehouse" label="调出仓库" width="120"></el-table-column>
          <el-table-column prop="inWarehouse" label="调入仓库" width="120"></el-table-column>
          <el-table-column prop="material" label="物料" width="150"></el-table-column>
          <el-table-column prop="quantity" label="数量"></el-table-column>
          <el-table-column prop="unit" label="单位" width="80"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MoveList',
  data() {
    return {
      tableData: [
        {
          billNo: 'KCDB-20240425-001',
          billDate: '2024-04-25',
          outWarehouse: '主仓库',
          inWarehouse: '分仓库A',
          material: 'A型材料',
          quantity: 10,
          unit: '件',
          status: '已完成'
        },
        {
          billNo: 'KCDB-20240425-002',
          billDate: '2024-04-25',
          outWarehouse: '分仓库A',
          inWarehouse: '分仓库B',
          material: 'B型材料',
          quantity: 5,
          unit: '箱',
          status: '进行中'
        }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      this.$message.success('编辑: ' + row.billNo)
    },
    handleDelete(row) {
      this.$message.success('删除: ' + row.billNo)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style> 